
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 控制浏览器缓存 -->
    <meta http-equiv="Cache-Control" content="no-store" />
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符" />
    <!-- 页面关键词 -->
    <meta name="keywords" content="" />
    <title>付款</title>
    <link href="assets/wap/css/index.css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
    <form action="" class="edit_cash">
        <p>消费总额</p>
        <div class="shuru">
            <span>&yen;</span>
            <div id="div"></div>
        </div>
        <p class="shifu">
            <span>获赠积分</span>
            <span id="jifen" style="color: red;">0积分</span>
        </p>
        <p style="padding-top: 3%;">可询问工作人员应缴费用总额</p>
    </form>
    <input type="submit" value="支付" class="submit" />
</div>
<div class="layer-content">
    <div class="form_edit clearfix">
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
        <div class="num">9</div>
        <div class="num">.</div>
        <div class="num">0</div>
        <div id="remove">删除</div>
    </div>
</div>
<script src="assets/wap/js/jquery-3.1.1.min.js"></script>
<script>
    $(function(){

        //填写信息
        $('.infor-sub').click(function(e){
            $('.layer').hide();
            $('.form').hide();
            e.preventDefault();		//阻止表单提交
        })
        // 监听#div内容变化，改变支付按钮的颜色
        $('#div').bind('DOMNodeInserted', function(){
            if($("#div").text()!="" || $("#div").text()>'0'){
                $('.submit').removeClass('active');
                $('.submit').attr('disabled', false);
            }else{
                $('.submit').addClass('active');
                $('.submit').attr('disabled', true);
            }
        })
        $('#div').trigger('DOMNodeInserted');

        $('.shuru').click(function(e){
            $('.layer-content').animate({
                bottom: 0
            }, 200)
            e.stopPropagation();
        })
        $('.wrap').click(function(){
            $('.layer-content').animate({
                bottom: '-200px'
            }, 200)
        })

        $('.form_edit .num').click(function(){
            var oDiv = document.getElementById("div");
            oDiv.innerHTML += this.innerHTML;
            console.log(oDiv.innerHTML)
        })
        $('#remove').click(function(){
            var oDiv = document.getElementById("div");
            var oDivHtml = oDiv.innerHTML;
            oDiv.innerHTML = oDivHtml.substring(0,oDivHtml.length-1);
        })
    })
</script>
</body>
</html>
